<template>
  <!--筛选项-->
  <div class="clearfix selector">
      <!-- 品牌列表 -->
      <div class="type-wrap logo">
          <div class="fl key brand">品牌</div>
          <div class="value logos">
              <ul class="logo-list">
                  <li
                    v-for="trademark in trademarkList"
                    :key="trademark.tmId"
                    @click="$emit('changeTrademark', trademark)"
                  >
                    {{trademark.tmName}}
                  </li>
              </ul>
          </div>
      </div>
      <!-- 属性列表 -->
      <div class="type-wrap" v-for="attrs in attrsList" :key="attrs.attrId">
          <div class="fl key">{{attrs.attrName}}</div>
          <div class="fl value">
              <ul class="type-list">
                  <li v-for="value in attrs.attrValueList" :key="value">
                      <a @click="$emit('changeAttrs', { id: attrs.attrId, value, name: attrs.attrName})">{{value}}</a>
                  </li>
              </ul>
          </div>
          <div class="fl ext"></div>
      </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Selector',
  computed: {
    ...mapGetters('search', ['trademarkList', 'attrsList'])
  }
}
</script>

<style lang="scss" scoped>
.selector{
  border: 1px solid #ddd;
  margin-bottom: 5px;
  overflow: hidden;
  .logo{
      border-top: 0;
      margin: 0;
      position: relative;
      overflow: hidden;
      .key{
          padding-bottom: 87px!important;
      }
  }
  .type-wrap{
      margin: 0;
      position: relative;
      border-top: 1px solid #ddd;
      overflow:hidden;
      .key{
          width: 100px;
          background: #f1f1f1;
          line-height: 26px;
          text-align: right;
          padding: 10px 10px 0 15px;
          float:left;
      }
      .value{
          overflow: hidden;
          padding: 10px 0 0 15px;
          color: #333;
          margin-left: 120px;
          padding-right: 90px;
          .logo-list{
              li{
                  float: left;
                  border: 1px solid #e4e4e4;
                  margin: -1px -1px 0 0;
                  width: 105px;
                  height: 52px;
                  text-align: center;
                  line-height: 52px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-weight: 700;
                  color: #e1251b;
                  font-style: italic;
                  font-size: 14px;
                  img{
                      max-width: 100%;
                      vertical-align: middle;
                  }
              }
          }
          .type-list{
              li{
                  float: left;
                  display: block;
                  margin-right: 30px;
                  line-height: 26px;
                  a{
                      text-decoration: none;
                      color: #666;
                  }
              }
          }
      }
      .ext{
          position: absolute;
          top: 10px;
          right: 10px;
          .sui-btn{
              display: inline-block;
              padding: 2px 14px;
              box-sizing: border-box;
              margin-bottom: 0;
              font-size: 12px;
              line-height: 18px;
              text-align: center;
              vertical-align: middle;
              cursor: pointer;
              padding: 0 10px;
              background: #fff;
              border: 1px solid #d5d5d5;
          }
          a{
              color: #666;
          }
      }
  }
}
</style>
